<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>account_setting</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../static/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../../static/ztree/jquery.ztree.all.min.js"></script>
    <style>
        form {
            width: 95%;
        }
    </style>
</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>发送邮件</legend>
</fieldset>

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">接收人</label>
        <div class="layui-input-block zTreeDemoBackground left">
            <input type="text" name="receiver_userid" id="receiver_userid" readonly="readonly" autocomplete="off" placeholder="请选择用户" class="layui-input" onclick="showMenu(); return false;">
        </div>
        <!---->
        <!--<div class="layui-input-block">-->
            <!--<select name="modules" lay-verify="required" lay-search="">-->
                <!--<option value="">直接选择或搜索选择</option>-->
                <!--<option value="1">layer</option>-->
                <!--<option value="2">form</option>-->
                <!--<option value="3">layim</option>-->
                <!--<option value="4">element</option>-->
                <!--<option value="5">laytpl</option>-->
                <!--<option value="6">upload</option>-->
                <!--<option value="7">laydate</option>-->
                <!--<option value="8">laypage</option>-->
                <!--<option value="9">flow</option>-->
                <!--<option value="10">util</option>-->
                <!--<option value="11">code</option>-->
                <!--<option value="12">tree</option>-->
                <!--<option value="13">layedit</option>-->
                <!--<option value="14">nav</option>-->
                <!--<option value="15">tab</option>-->
                <!--<option value="16">table</option>-->
                <!--<option value="17">select</option>-->
                <!--<option value="18">checkbox</option>-->
                <!--<option value="19">switch</option>-->
                <!--<option value="20">radio</option>-->
            <!--</select>-->
        <!--</div>-->
        <!---->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="save">发送</button>
        </div>
    </div>
</form>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;border: 1px solid #D2D2D2;background: #fff;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;overflow-y: scroll"></ul>
</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'layer','layedit'], function() {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;
            layedit = layui.layedit;


        var editIndex =layedit.build('LAY_demo_editor');

        //监听提交
        form.on('submit(save)', function(data){
//            layedit.sync(editIndex);//将富文本的内容同步到textarea中去
            data.field.content = layedit.getContent(editIndex); //获取html
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            layer.msg('确认发送吗', {
                time: 0
                , btn: ['确定', '取消']
                , shade: 0.3
                , yes: function (index) {

                    //组装 收件人
                    var dt1 = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);
                    var receiver_userid = "";
                    for (var i = 0; i < dt1.length; i++) {
                        if(receiver_userid == ""){
                            receiver_userid = dt1[i].id;
                        }else {
                            receiver_userid += "," + dt1[i].id;
                        }
                    }
                    if(receiver_userid == ""){
                        layer.msg("请至少选择一个收件人！", function() {});
                        return;
                    }
                    data.field.receiver_userid = receiver_userid;

                    if(data.field.title == ""){
                        layer.msg("标题不能为空！", function() {});
                        return;
                    }



                    if(data.field.content == ""){
                        layer.msg("内容不能为空！", function() {});
                        return;
                    }
                    layer.close(index); // 关闭当前提示框
                    $.ajax({
                        url: "/sysMessage/saveGg",
                        data: data.field,
                        dataType: "json",
                        type: "post",
                        async: false,
                        success: function (res) {
                            if (res.errcode === "0"){
                                parent.layer.msg("发送成功", {offset: '150px'});   // 保存成功
                                window.location.reload();
                            } else if (res.errcode === "1"){
                                layer.msg(res.errmsg, function(){});
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.error(XMLHttpRequest.status);
                            console.error(XMLHttpRequest.readyState);
                            console.error(textStatus);
                        }
                    });
                }
            });
            return false;
        });
    });
</script>

<script type="text/javascript">
    var setting = {
        check: {
            enable: true,
            chkboxType: {"Y":"", "N":""}
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };

    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getCheckedNodes(true),
                v = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#receiver_userid");
        cityObj.attr("value", v);
    }

    function showMenu() {
        var cityObj = $("#receiver_userid");
        var cityOffset = $("#receiver_userid").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "receiver_userid" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    $(document).ready(function(){

        $.ajax({
            type:'post',
            url:'/user/listForZtree',
            data:{},
            async:false,
            dataType:'json',
            cache:false,
            success:function(res){
                var errcode = res.errcode;

                if(errcode == '0'){
                    var rows = res.data;
                    $.fn.zTree.init($("#treeDemo"), setting, rows);
                }else {
                    layer.msg(res.errmsg, function(){});
                }
//                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            },
            error:function(e){
                console.log("网络发生错误了！"  + e);
            }
        });


    });
</script>
</body>

</html>